<template>
<div id="wrap" ref="market">
  <div>
  <form action="/">
    <van-search style=""
      placeholder="请输入商品名称"
      v-model="search"
      :show-action="true"
      @search="goSearch"
      @cancel="handleCancel"></van-search>
  </form>
  </div>
  <div id="market" class="content-block">
  <scroller style="margin-top:40px" 
      ref="marketScroller"
      :on-refresh="refreshMarket"
      :on-infinite="infiniteMarket">
      <!-- content goes here -->
    <div>
    <grid :cols="cols">
      <grid-item>
        <div class="market-category" >
          <router-link :to="{ path: '/market/productList', query: { id: '123' }}">
            <img style="height: 128px;width: 100%;" src="../../assets/market/xiaoyuan.png" />
        　　<div style="position:absolute; z-index:2; left:0px; top:0px;height: 128px;width: 100%;">
                <span class='m-bar'>校园二手</span>
        　　</div>
          </router-link>
        </div>
      </grid-item>
      <grid-item>
        <div class="market-category" >
          <router-link :to="{ path: '/market/productList', query: { id: '123' }}">
            <img style="height: 128px;width: 100%;" src="../../assets/market/lvxing.png" />
        　　<div style="position:absolute; z-index:2; left:0px; top:0px;height: 128px;width: 100%;">
        　　　　<span class='m-bar'>培训</span>
        　　</div>
          </router-link>
        </div>
      </grid-item>
    </grid>
    </div>
    <swiper dots-position="center" style="height: 180px; margin-top:10px" loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <divider>推荐</divider>
    <grid>
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498378067270&di=cf11facef4e4864facd6a3c39c7a6cc8&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F95%2Fd%2F121.jpg);">
          <a class='m-bar'>旅行</a>
        </div>
      </grid-item>
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          <a class='m-bar'>校园二手</a>
        </div>
      </grid-item>
      <grid-item>
        <div class="market-category" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          <a class='m-bar'>校园二手</a>
        </div>
      </grid-item>
      </grid>
      <divider>最新</divider>
      <div>
          <div v-for="(item, index) in prodctLastItems" :key="item.id" style="margin-top: 5px;width: 47%;float: left;padding-left: 2%;">
            <img slot="icon" src="https://static.vux.li/demo/3.jpg" style="height:128px;width: 100%;">
            <div style="width: 100%;height: 40px;line-height: 40px;font-size: 14px;">
              <span style="">名称：{{ item.productName }} </span>
              <span style="color: rgb(255, 103, 105);font-weight: bold;margin-top: 5px;">价格：￥ {{ item.productPrice }}</span>
            </div>
          </div>
          <div style="clear:both"></div>
      </div>
    </scroller>
    </div>
</div>
</template>

<script>

const baseList = [{
  url: 'javascript:',
  img: 'http://36588.com.cn/website/upload/goods/2014/8/7/0f63db3c-228f-4368-ac3b-71e319bcd3b9.jpeg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/2.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '送你一次旅行'
}]

const urlList = baseList.map((item, index) => ({
  url: '/aboutUs',
  img: item.img,
  title: 'ok'
}))

import FlyrayTabbar from '@/components/FlyrayTabbar'
import { Grid, GridItem, Swiper, Divider } from 'vux'
import Vue from 'vue'
import { Search } from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.component(Search.name, Search)
import { getAuthInfo } from '../utils/common'
import { getCustomerId } from '../utils/utils'

export default {
  components: {
    Grid,
    GridItem,
    Swiper,
    Divider,
    FlyrayTabbar
  },
  data () {
    return {
      demo06_list: urlList,
      demo06_index: 0,
      noData: '',
      prodctLastItems: [],
      currentPage: '0',
      cols: 2,
      prodctRecommendItems: [],
      prodctAddItems: [],
      prodctCategoryItems: [],
      search: '',
      customerId: getCustomerId()
    }
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted: function () {
    this.top = 1
    this.bottom = 10
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    this.$refs.market.style.height = (h - 53) + 'px'
  },
  methods: {
    refreshMarket: function (done) {
      console.log('下拉刷新市场数据')
      console.log('refreshMarket')
      var self = this
      this.noData = true
      setTimeout(() => {
        self.prodctLastItems = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': this.customerId,
            'currentPage': '0',
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/market/products/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          var code = response.data.code
          if (code === '01') {
            return
          }
          self.currentPage = response.data.pagination.currentPage + 1
          var prodctLastItems = response.data.data
          self.prodctLastItems = prodctLastItems
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteMarket: function (done) {
      console.log('上拉加载市场数据')
      console.log('infiniteMarket')
      var self = this
      if (this.noData) {
        console.log(this.noData)
        this.noData = false
        self.$refs.marketScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': this.customerId,
            'currentPage': self.currentPage,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/market/products/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.marketScroller.finishInfinite(true)
            return
          }
          self.currentPage = response.data.pagination.currentPage + 1
          var data = response.data.data
          var start = data.length
          for (var i = 0; i < start; i++) {
            self.prodctLastItems.push(data[i])
          }
          self.bottom = self.bottom + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    demo06_onIndexChange (index) {
      this.demo06_index = index
    },
    goSearch (index) {
      console.log('goSearch')
    },
    handleCancel (index) {
      console.log('handleCancel')
    }
  }
}
</script>

<style scoped>

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
  font-size: 12px;
  text-align: center;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
  font-size: 12px;
  text-align: center;
}

.weui-grid {
  padding: 0 5px 0 5px !important;
}

.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
.market-category{
  text-align: center;
  background-position: center;
  height: 128px;
  line-height: 128px;
  color: #10c5b6;
  background-attachment: fixed;
  background-repeat:no-repeat; 
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
.m-bar{
  color: #ff6769;
  border-color: #ff6769;
  border-radius: 4px;
  border: 1px solid;
  padding: 5px 20px 5px 20px;
}

#search{
  background: none; 
  outline:none;
  outline:medium;
}

.input-lg {
    height: 21px;
    margin:5px;
    width: 84%;
    padding: 3px;
    font-size: 12px;
    line-height: 1.3333333;
    border-radius: 6px;
    border:1px solid #10c5b6;
}
.search-btn{
  background-color: rgb(16, 197, 182);
  color: rgb(255, 255, 255);
  display: block;
  float: right;
  border-radius: 3px;
  padding: 5px;
  width: 7%;
  margin: 5px 5px 0 0;
  text-align: center;
  font-size: 0.75rem;
  height: 19px;
  line-height: 19px;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
　color: #666;font-size:16px;
  line-height: 21px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
　color:#666;font-size:16px;
  line-height: 21px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
　color:#666;font-size:16px;
  line-height: 21px;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
　color:#666;font-size:16px;
  line-height: 21px;
}
</style>
